<template>
  <div class="player" v-if="listnum > 0">
    <div class="fplay-l">
      <div :class="[canStop ? 'play-btn' : 'play-btn2 an']">
        <div
          v-if="scene == 48"
          :class="[isPlaying ? 'r' : 's']"
          @click="showModalOnDiv"
        ></div>
         <div
          v-else
          :class="isPlaying ? 'r' : 's'"
          @click="changePlay"
        ></div>
      </div>
      <div class="mname">
       <marquee-text :repeat="10" :key="playItem.id"> {{ playItem.companyName }} - {{ playItem.resourceName }}</marquee-text>
      </div>
      <div class="mtime">{{currentTime || ''}}<span>/</span>{{duration}}</div>
    </div>
    <div class="fplay-r">
      <div class="play-btn" v-if="scene == 48" @click="showListClick">
        <div class="list-num">{{ listnum }}</div>
      </div>
    </div>
    <div class="jingdu"></div>
  </div>
  <PlayList v-if="showPlayList" />
  <audio
    ref="myaudio"
    @canplay="getDuration"
    @timeupdate="updateTime"
    @ended="overAudio"
  ></audio>
  <div v-if="listnum > 0" style="height: 100px"></div>
  <div v-if="showModal" class="stopPlay">
    <div class="stopPlay-title">是否确定停止播放</div>
    <div class="stopPlay-btn">
      <div class="stopPlay-btn-f" @click="cancelModalOnDiv">取消</div>
      <div class="stopPlay-btn-s" @click="changePlay">确定</div>
    </div>
  </div>
</template>

<script>
import pubsub from "pubsub-js";
import { useStore } from "vuex";
import { ref, reactive, onMounted, watch, computed } from "vue";
import PlayList from "./PlayList.vue";
import MarqueeText from 'vue-marquee-text-component'
import axios from "axios";
export default {
  components: {
    PlayList,
    MarqueeText
  },
  props: {
  },
  setup(props, ctx) {
    const getQueryVariable = (variable) => {
      var query = window.location.search.substring(1);
      var vars = query.split("&");
      for (var i = 0; i < vars.length; i++) {
        var pair = vars[i].split("=");
        if (pair[0] == variable) {
          return pair[1];
        }
      }
      return false;
    };
    const id = getQueryVariable("fileid");
    const store = useStore();
    const state = store.state;
    const scene = sessionStorage.getItem('scene') ? sessionStorage.getItem('scene') : state.scene;
    const myaudio = ref();
    const duration = ref(0);
    const currentTime = ref(0);
    const showPlayList = ref(false); //是否显示播放列表
    const showModal = ref(false); //是否显示播放列表
    let isPlaying = ref(true);
    let canPlay = ref(id);
    const playItem = ref(state.playList[scene].data.current);
    const listnum = computed(() => {
      return state.playList[scene].data.list.length;
    });
    const canStop = computed(() => {
      if (!state.isDemand && canPlay.value) {
        canPlay.value = false;
        doplay();
      }
      let newPlayItem = state.playList[scene].data.current;
      if (newPlayItem.id !== playItem.value.id) {
        playItem.value = newPlayItem;
        doplay();
      }
      return newPlayItem.playUserId==state.userId || state.userId=="9999" || scene == 49;
    })
    const doplay = () => {
      const current = state.playList[scene].data.current
      console.log('current',current.resourceUrl)
      myaudio.value.src = current.resourceUrl
      myaudio.value.currentTime = current.realDuration || ''
      myaudio.value.play()
      isPlaying.value = true
    }
    const showModalOnDiv = () => {
      if (canStop.value) {
        showModal.value = true;
      }
    }
    const cancelModalOnDiv = () => {
      showModal.value = false;
    }
    const changePlay = () => {
      if (48 == scene) {
        if (playItem.value.playUserId == state.userId || state.userId == "9999") {
          axios
            .post("/mguo/audio/stopAudio", {resourceId: playItem.value.id,userId: state.userId,});
        }
      } else {
        if (!isPlaying.value) {
          myaudio.value.play();
          isPlaying.value = true;
        } else {
          myaudio.value.pause();
          isPlaying.value = false;
        }
      }
      showModal.value = false;
    }
    onMounted(() => {
      if (!id || !state.isDemand) {
        doplay();
      }
    });
    const formateTime = (time) => {
      const h = parseInt(time / 3600);
      const minute = parseInt((time / 60) % 60);
      const second = Math.ceil(time % 60);
      const hours = h < 10 ? "0" + h : h;
      const formatSecond = second > 59 ? 59 : second;
      return `${hours > 0 ? `${hours}:` : ""}${
        minute < 10 ? "0" + minute : minute
      }:${formatSecond < 10 ? "0" + formatSecond : formatSecond}`;
    };
    const getDuration = () => {
      duration.value = formateTime(Math.floor(myaudio.value.duration));
    };
    const updateTime = (e) => {
      currentTime.value = formateTime(Math.floor(e.target.currentTime));
    };
    const overAudio = () => {
      //删除播放完音频
      if (scene == 48) {
        store.dispatch("deletePlayItem", playItem.value.id);
      }

      store.commit("setPlayer", {
        isPlaying: true,
      });
    };
    const showListClick = () => {
      showPlayList.value = !showPlayList.value;
    };
    //监听播放器
    pubsub.subscribe("player", (event, v) => {
      showPlayList.value = v;
    });

    return {
      listnum,
      playItem,
      myaudio,
      duration,
      currentTime,
      getDuration,
      updateTime,
      doplay,
      changePlay,
      isPlaying,
      showListClick,
      showPlayList,
      overAudio,
      canStop,
      scene,
      showModal,
      showModalOnDiv,
      cancelModalOnDiv,
    };
  },
};
</script>

<style lang="scss" scope>
.player {
  position: fixed;
  bottom: 0;
  width: 100%;
  .jingdu {
    width: 100%;
    height: 4px;
    background: red;
    position: absolute;
    top: 0;
    z-index: 999;
  }
  .fplay-l {
    position: absolute;
    bottom: 0;
    height: 74px;
    width: 60%;
    background: linear-gradient(to right, #ff3e00, #fbd639);
    .play-btn {
      position: absolute;
      width: 42px;
      height: 42px;
      background: #fdc830;
      border-radius: 42px;
      left: 16px;
      top: 16px;
      .r {
        position: absolute;
        width: 10px;
        height: 10px;
        background: white;
        top: 16px;
        left: 16px;
        border-radius: 2px;
      }
      .s {
        position: absolute;
        width: 0;
        height: 0;
        top: 15px;
        left: 18px;
        border-top: 7px solid transparent;
        border-left: 12px solid white;
        border-bottom: 7px solid transparent;
      }
    }
    .play-btn2 {
      position: absolute;
      width: 42px;
      height: 42px;
      background: #fdc830 url(./../images/icon-cd.png) no-repeat;
      border-radius: 42px;
      left: 16px;
      top: 16px;
      .r {
        position: absolute;
        width: 10px;
        height: 10px;
        background: white;
        top: 16px;
        left: 16px;
        border-radius: 2px;
      }
      .s {
        position: absolute;
        width: 0;
        height: 0;
        top: 15px;
        left: 18px;
        border-top: 7px solid transparent;
        border-left: 12px solid white;
        border-bottom: 7px solid transparent;
      }
    }
    .mname {
      position: absolute;
      color: white;
      font-size: 14px;
      left: 70px;
      top: 18px;
      height: 20px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      width: 60%;
    }
    .mtime {
      position: absolute;
      color: white;
      font-size: 14px;
      left: 70px;
      top: 40px;
      span {
        padding: 0 4px;
      }
    }
  }
  .fplay-r {
    position: absolute;
    bottom: 0;
    height: 74px;
    width: 40%;
    right: 0;
    background: linear-gradient(to right, #ffc73b, #ff7e20);
    border-left: 2px solid #fffbe4;
    .play-btn {
      position: absolute;
      width: 42px;
      height: 42px;
      background: #fdc830 url(../images/icon-list.png) no-repeat center center;
      border-radius: 42px;
      right: 16px;
      top: 16px;
      .list-num {
        position: absolute;
        right: -3px;
        top: -3px;
        color: white;
        background: red;
        width: 16px;
        height: 16px;
        text-align: center;
        border-radius: 16px;
        font-size: 12px;
        line-height: 16px;
      }
    }
  }
}
.stopPlayDiv {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.3);
  z-index: 9999;
}
.stopPlay {
    width: 280px;
    height: 125px;
    border-radius: 8px;
    background: rgba(255, 255, 255, 1);
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translateX(-140px) translateY(-75px);
    padding-top: 32px;
  }
  .stopPlay-title {
    text-align: center;
    color: rgba(0, 0, 0, 0.9);
    font-family: PingFang SC;
    font-weight: 600;
    font-size: 16px;
    line-height: 24px;
  }
  .stopPlay-btn {
    position: absolute;
    bottom: 0;
    height: 56px;
    display: flex;
    width: 100%;
    border-top: 1px solid rgb(231, 231, 231);
  }
  .stopPlay-btn-f {
    color: rgba(0, 0, 0, 0.9);
    font-family: PingFang SC;
    font-size: 16px;
    line-height: 56px;
    flex: 1;
    text-align: center;
    border-right: 1px solid rgb(231, 231, 231);
  }
  .stopPlay-btn-s {
    color: rgb(227, 77, 89);
    font-family: PingFang SC;
    font-size: 16px;
    line-height: 56px;
    flex: 1;
    text-align: center;
  }
@keyframes rotation {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
.an {
  transform: rotate(360deg);
  animation: rotation 3s linear infinite;
}
</style>
